import ChartBase from "./chart-base";

import {
  grid,
  legend,
  tooltip,
  xAxis,
  yAxis,
  gridConfig,
  legendConfig,
  xAxisConfig,
  yAxisConfig,
  tooltipConfig,
  barSeries,
  barSeriesLabel,
  lineSeries,
  lineSeriesLabel,
} from "./common";
import { deepClone, mergeObject } from "@/utils";
export default class MixLineBar extends ChartBase {
  constructor() {
    super();
  }

  // 基础描述
  _info = {
    name: "折柱混合图",
    type: "mix-line-bar", // 图表类型

    group: "mix", // 图表分类
    component: "e-chart",
    icon: "mix-line-bar", // 图表展示ICON
  };

  // 总 配置项
  _defaultOption = {
    dataset: {
      source: [],
      dimensions: [],
    },
    grid,
    legend,
    tooltip,
    xAxis,
    yAxis,
    series: [],
  };
  // 系列
  _defaultSeries = {};

  _barDefaultSeries = {
    type: "bar",
    ...barSeries,
    ...barSeriesLabel,
  };

  _lineDefaultSeries = {
    type: "line",
    ...lineSeries,
    ...lineSeriesLabel,
  };

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: "维度",
      key: "xField",
      type: ["string", "date", "number"],
      limit: 1,
    },
    {
      label: "折线",
      key: "lineField",
      type: ["number"],
      limit: 5,
    },
    {
      label: "柱图",
      key: "barField",
      type: ["number"],
      limit: 5,
    },
  ];

  // 样式配置描述信息
  _styleOptionConfig = [
    ...gridConfig,
    ...legendConfig,
    ...tooltipConfig,
    ...xAxisConfig,
    ...yAxisConfig,

    {
      label: "柱条配置",
      bindKeys: "_group.bar.series",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "最大宽度",
      bindKeys: "barSeries.barMaxWidth",
      controlType: "input-number",
      controlValue: 40,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "最小宽度",
      bindKeys: "barSeries.barMinWidth",
      controlType: "input-number",
      controlValue: 1,
      controlProps: {},
      controlConfigs: {},
    },

    {
      label: "折线配置",
      bindKeys: "_group.line.series",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标记图形",
      bindKeys: "lineSeries.symbol",
      controlType: "select",
      controlValue: "emptyCircle",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "空心圆",
            value: "emptyCircle",
          },
          {
            label: "圆",
            value: "circle",
          },
          {
            label: "矩形",
            value: "rect",
          },
          {
            label: "圆角矩形",
            value: "roundRect",
          },
          {
            label: "三角形",
            value: "triangle",
          },
          {
            label: "钻石",
            value: "diamond",
          },
          {
            label: "箭头",
            value: "arrow",
          },
        ],
      },
    },
    {
      label: "标记大小",
      bindKeys: "lineSeries.symbolSize",
      controlType: "input-number",
      controlValue: 4,
      controlProps: {},
      controlConfigs: {},
    },
  ];

  getOption({
    dataField = [],
    dataList = [],
    dataTotal = 0,
    dataPoolField,
    styleOptionConfig = [],
    themeColor = [],
    themeStyle = {},
  }) {
    this._updateDataPoolField(dataField, dataPoolField);

    const { xField, lineField, barField } = this._handledataPoolFieldData(
      dataPoolField,
      dataList
    );

    let { option, barSeries, lineSeries, config } =
      this._transformStyleOptionConfig(styleOptionConfig);

    let defaultOption = deepClone(this._defaultOption);
    let barDefaultSeries = deepClone(this._barDefaultSeries);
    let lineDefaultSeries = deepClone(this._lineDefaultSeries);

    // 再合并自定义配置项
    if (defaultOption && option)
      defaultOption = mergeObject(defaultOption, option);
    if (barDefaultSeries && barSeries)
      barDefaultSeries = mergeObject(barDefaultSeries, barSeries);
    if (lineDefaultSeries && lineSeries)
      lineDefaultSeries = mergeObject(lineDefaultSeries, lineSeries);

    defaultOption.color = themeColor;
    if (this._info.component === "e-chart") {
      lineField.forEach((field) => {
        defaultOption.series.push({
          name: field.fieldDescribe,
          ...lineDefaultSeries,
          data: field.dataList,
        });
      });

      barField.forEach((field) => {
        defaultOption.series.push({
          name: field.fieldDescribe,
          ...barDefaultSeries,
          data: field.dataList,
        });
      });
      xField.forEach((field) => {
        defaultOption.xAxis.data = field.dataList;
      });
    }
    if (config) {
      if (config?.xAxisConfig?.font.length) {
        defaultOption.xAxis.axisLabel.formatter = (item) => {
          let temp = item.slice(0, config.xAxisConfig.font.length);
          return (
            item.slice(0, config.xAxisConfig.font.length) +
            (item.length > temp.length ? "..." : "")
          );
        };
      }
    }
    return defaultOption;
  }
}
